<!-- 我是退款 -->
<template lang="html">
  <div class="backBox">
    <el-row class="formBox box1">
        <el-col :span="2" class="text-right headLable">
          <span>订单号：</span>
        </el-col>
        <el-col :span="4" class="text-left">
          <el-input v-model="form.orderNo" size="small" class="text" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="2" class="text-right">
          <span>产品名：</span>
        </el-col>
        <el-col :span="4" class="text-left">
          <el-input v-model="form.productName" size="small" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="2" class="text-right">
          <span>申请时间：</span>
        </el-col>
        <el-col :span="4" class="text-left">
          <el-date-picker
            v-model="form.orderTime"
            size="small"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-col>
    </el-row>
    <el-row class="formBox">
      <el-col :span="2" class="text-right headLable">
        <span>客户名：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-input v-model="form.userName" size="small" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="2" class="text-right">
        <span>客户手机：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-input v-model="form.userPhone" size="small" placeholder="请输入内容"></el-input>
      </el-col>
    </el-row>
    <el-row class="formBox box2">
       <el-col :span="2" :offset="2" class="text-left" style="margin-left:80px;">
         <el-button type="success" size="small" @click="find">筛选</el-button>
       </el-col>
    </el-row>


    <el-row class="tableBox" v-loading.body="$store.state.TanGoods.loading">
      <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="人工退款" name="one">
            <ul class="listBox">
                <li class="first">
                  <span class="order gray">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="allListType" @change="handleCheckAllChange" class="check gray" >订单号</el-checkbox>
                  </span>
                  <span class="name gray">产品名</span>
                  <span class="price gray">单价</span>
                  <span class="num gray">数量</span>
                  <span class="pay gray">实付</span>
                  <span class="customer gray">客户</span>
                  <span class="reason gray">退款原因</span>
                  <span class="downTime2 green">申请时间</span>
                  <span class="operation">操作</span>
                </li>
              <el-checkbox-group v-model="listId" @change="handleCheckedCitiesChange">
                <li v-for="item in $store.state.TanGoods.backList">
                  <span class="order">
                    <el-checkbox class="check" :label="item.id" ></el-checkbox>
                    <span>{{item.orderNo}}<br>{{item.yzOrderNo}}</span>
                  </span>
                  <span class="name">
                    <p>{{item.productName}}</p>
                    <p class="gray">{{item.sku}}</p>
                  </span>
                  <span class="price text-left">{{item.price/100}}</span>
                  <span class="num text-left green">x{{item.count}}</span>
                  <span class="pay text-left">{{item.payPrice/100}}</span>
                  <span class="customer text-left">
                    <p>{{item.customerName}}</p>
                    <p>{{item.customerPhone}}</p>
                  </span>
                  <span class="reason">
                    <p>{{item.refundsReason}}</p>
                  </span>
                  <span class="downTime2">
                    <p>{{item.refundTime | getDate}}</p>
                    <p>{{item.refundTime | getTime}}</p>
                  </span>
                  <span class="operation green" style="cursor: pointer;" @click="refund(item.id)">已人工退</span>
                </li>
              </el-checkbox-group>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="退款异常" name="two">
            <ul class="listBox">
                <li class="first">
                  <span class="order gray">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="allListType" @change="handleCheckAllChange" class="check gray" >订单号</el-checkbox>
                  </span>
                  <span class="name gray">产品名</span>
                  <span class="price gray">单价</span>
                  <span class="num gray">数量</span>
                  <span class="pay gray">实付</span>
                  <span class="customer gray">客户</span>
                  <span class="reason gray">退款原因</span>
                  <span class="downTime2 green">申请时间</span>
                  <span class="operation">异常原因</span>
                </li>
              <el-checkbox-group v-model="listId" @change="handleCheckedCitiesChange">
                <li v-for="item in  $store.state.TanGoods.backList">
                  <span class="order">
                    <el-checkbox class="check" :label="item.id" ></el-checkbox>
                    <span>{{item.orderNo}}<br>{{item.yzOrderNo}}</span>
                  </span>
                  <span class="name">
                    <p>{{item.productName}}</p>
                    <p class="gray">{{item.sku}}</p>
                  </span>
                  <span class="price text-left">{{item.price?item.price/100:'0'}}</span>
                  <span class="num text-left green">x{{item.count?item.count:'0'}}</span>
                  <span class="pay text-left">{{item.payPrice?item.payPrice/100:'0'}}</span>
                  <span class="customer text-left">
                    <p>{{item.customerName}}</p>
                    <p>{{item.customerPhone}}</p>
                  </span>
                  <span class="reason">
                    <p>{{item.refundsReason}}</p>
                  </span>
                  <span class="downTime2">
                    <p>{{item.refundTime | getDate}}</p>
                    <p>{{item.refundTime | getTime}}</p>
                  </span>
                  <span class="operation green">{{item.refundsError}}</span>
                </li>
              </el-checkbox-group>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="全部" name="three">
            <ul class="listBox">
                <li class="first">
                  <span class="order gray">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="allListType" @change="handleCheckAllChange" class="check gray" >订单号</el-checkbox>
                  </span>
                  <span class="name gray">产品名</span>
                  <span class="price gray">单价</span>
                  <span class="num gray">数量</span>
                  <span class="pay gray">实付</span>
                  <span class="customer gray">客户</span>
                  <span class="reason gray">退款原因</span>
                  <span class="downTime2 green">申请时间</span>
                  <span class="operation">订单状态</span>
                </li>
              <el-checkbox-group v-model="listId" @change="handleCheckedCitiesChange">
                <li v-for="item in  $store.state.TanGoods.backList">
                  <span class="order">
                    <el-checkbox class="check" :label="item.id"></el-checkbox>
                    <span>{{item.orderNo}}<br>{{item.yzOrderNo}}</span>
                  </span>
                  <span class="name">
                    <p>{{item.productName}}</p>
                    <p class="gray">{{item.sku}}</p>
                  </span>
                  <span class="price text-left">{{item.price/100}}</span>
                  <span class="num text-left green">x{{item.count}}</span>
                  <span class="pay text-left">{{item.payPrice/100}}</span>
                  <span class="customer text-left">
                    <p>{{item.customerName}}</p>
                    <p>{{item.customerPhone}}</p>
                  </span>
                  <span class="reason">
                    <p>{{item.refundsReason}}</p>
                  </span>
                  <span class="downTime2">
                    <p>{{item.refundTime | getDate}}</p>
                    <p>{{item.refundTime | getTime}}</p>
                  </span>
                  <span class="operation">{{item.refundStatusDesc}}</span>
                </li>
              </el-checkbox-group>
            </ul>
          </el-tab-pane>
      </el-tabs>
    </el-row>
    <el-row class="text-right" style="margin-top:10px;">
      <el-col :span="2" v-if="activeName=='one'">
        <el-button type="success" size="small" @click="refunds">已人工退款</el-button>
      </el-col>
      <el-col :span="2" v-if="activeName=='two'">
        <el-button type="success" size="small" @click="again">再次发起自动退款</el-button>
      </el-col>
      <el-col :span="2" v-if="activeName=='two'">
        <el-button type="success" size="small" @click="refunds">已人工退款</el-button>
      </el-col>
      <el-col :span="20">
        共{{this.$store.state.TanGoods.total}}条
        <span style="display:inline-block; min-width:100px;">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="page"
            :page-size="100"
            layout="prev, pager, next, jumper"
            :page-count="$store.state.TanGoods.pages">
          </el-pagination>
        </span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
var allListId = [];
import axios from 'axios'
var url;

export default {
  data() {
    return {
      form: {
        orderNo: '',
        productName: '',
        orderTime: '',
        userName: '',
        userPhone: ''
      },
      activeName: 'one',
      options: [{
        value: '选项1',
        label: '选项1'
      }, {
        value: '选项2',
        label: '选项2'
      }, {
        value: '选项3',
        label: '选项3'
      }, {
        value: '选项4',
        label: '选项4'
      }, {
        value: '选项5',
        label: '选项5'
      }],
      listId: [],
      checkAll: true,
      allList: [],
      isIndeterminate: true,
      allListType: false,
      page: 1
    }
  },
  filters: {
    getDes: function (val){
      if(val){
        var json = JSON.parse(val);
        return json.err_code_des
      }else{
        return "";
      }
    },
    status: function(val) {
      switch (val) {
        case 1:
          return '支付中';
          break;
        case 0:
          return '未支付';
          break;
        case -1:
          return '异常订单';
          break;
        case 2:
          return '已支付';
          break;
        case 3:
          return '已预约';
          break;
        case 7:
          return '已完成';
          break;
        case 8:
          return '退款中';
          break;
        case 1:
          return '异常订单';
          break;
        case 9:
          return '关闭';
          break;
        default:
          return '-';

      }
    },
    getDate: function(val) {
      var date = new Date();
      date.setTime(val);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      if (month < 10) {
        month = '0' + month;
      }
      var day = date.getDate();
      if (day < 10) {
        day = '0' + day;
      }
      return year + "-" + month + "-" + day;
    },
    getTime: function(val) {
      var date = new Date();
      date.setTime(val);
      var hours = date.getHours();
      if (hours < 10) {
        hours = '0' + hours;
      }
      var minutes = date.getMinutes();
      if (minutes < 10) {
        minutes = '0' + minutes;
      }
      return hours + ":" + minutes
    }
  },
  methods: {
    again:function (){
      if(this.listId.length==0){
        this.$message({
          showClose: true,
          message: '没有勾选订单',
          type: 'error'
        });
        return;
      }
      var str = '';
      for (let i = 0; i < this.listId.length; i++) {
        str = str + this.listId[i] + ",";
      }
      console.log(str);
      axios.get(url + '/v1/orders/refund', {
        params: {
          orderIds: str
        }
      }).then((res) => {
        if (res.data.code == 0) {
          that.listId=[];
          that.getList();
        } else {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: 'error'
          });
        }
      }).catch((err) => {
        console.log(err);
      })
    },
    refunds: function() {
      var that = this;
      if(this.listId.length==0){
        this.$message({
          showClose: true,
          message: '没有勾选订单',
          type: 'error'
        });
        return;
      }
      var str = '';
      for (let i = 0; i < this.listId.length; i++) {
        str = str + this.listId[i] + ",";
      }
      console.log(str);
      // axios.get(url + '/v1/orders/put/refunds', {
      //   params: {
      //     orderIds: str
      //   }
      // }).then((res) => {
      //   if (res.data.code == 0) {
      //     that.listId=[];
      //     that.getList();
      //   } else {
      //     this.$message({
      //       showClose: true,
      //       message: res.data.msg,
      //       type: 'error'
      //     });
      //   }
      // }).catch((err) => {
      // })
    },
    refund: function(id) {
      this.$store.dispatch('showLoading', 'TanGoods');
      var that = this;
      axios.get(url + '/v1/orders/put/refunds', {
        params: {
          orderIds: id
        }
      }).then((res) => {
        if (res.data.code == 0) {
          that.getList();
        } else {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: 'error'
          });
        }
      }).catch((err) => {
        console.log(err);
      })
    },
    find: function() {
      this.getList();
    },
    handleCurrentChange: function() {
      this.getList();
    },
    handleCheckAllChange(event) {
      var all=[];
      for(let i=0;i<this.$store.state.TanGoods.backList.length;i++){
        all.push(this.$store.state.TanGoods.backList[i].id)
      }
      this.listId = event.target.checked ? all : [];
    },
    handleCheckedCitiesChange(value) {

    },
    changeDialog: function(type, id) {
      var json1 = {
        'type': type,
        'name': 'TanGoods',
        'id': id,
        'title': '订单详情'
      }
      this.$store.dispatch('changeDialog', json1);
    },
    getList: function() {
      this.$store.dispatch('showLoading', 'TanGoods');
      if (this.form.orderTime != '') {
        var time = this.form.orderTime.getTime()
      } else {
        var time = '';
      }
      if (this.activeName == 'one') {
        var type = 1;
        var status = ''
      } else if (this.activeName == 'two') {
        var type = '';
        var status = -1;
      } else if (this.activeName == 'three') {
        var type = '';
        var status = '';
      }
      var json1 = {
        'orderNo': this.form.orderNo,
        'orderTime': time,
        'otaPlatform': '',
        'pageCount': 10,
        'pageIndex': this.page,
        'productName': this.form.productName,
        'sort': '',
        'refundType': type,
        'status': status,
        'type': 3,
        'userName': this.form.userName,
        'userPhone': this.form.userPhone
      };
      this.$store.dispatch('getAllGoodsList', json1);
    },
  },
  watch: {
    activeName: function() {
      this.getList();
      this.listId=[];
    }
  },
  created() {
    url = this.$store.state.url
    this.getList();
  }
}
</script>

<style>
.backBox .el-checkbox {
  vertical-align: top;
}

.backBox .el-checkbox__label {
  display: none;
}
</style>
<style lang="Sass" scoped>
.backBox{width: 100%; height: 100%;padding: 20px 10px 10px 10px; box-sizing: border-box;

  .formBox{ background: #fff; padding: 10px; text-align: left;

    .text{ height: 30px;
      .el-input__inner{height: 30px; width: 100%;}
    }
    .date{width: 150px; height: 30px;
      .el-input__inner{height: 30px; width: 100%;}
    }
    .select{width: 120px;
      .el-input__inner{width: 100%;}
    }
  }
  span{font-size: 12px; line-height: 30px;}
  .box1{border-radius: 10px 10px 0 0; padding: 20px 10px 0 10px;}
  .box2{border-radius: 0 0 10px 10px; padding: 0px 10px 20px 10px;}
  .tableBox{background: #fff; padding: 20px; margin-top: 20px; border-radius: 10px;}
  .cell{text-align: left;}
  .btn{height: 32px;
    span{line-height: 0px;}
  }

}
.listBox{width: 100%; background: #fff;

  .first{display: flex; height: 30px; line-height: 30px; text-align: left; padding: 5px; background: #FAFAFC;
      span{display: inline-block; line-height: 30px; font-size: 12px;}
      .order{flex: 0 0 220px;}
      .name{flex: 1;}
      .price{flex: 0 0 60px;}
      .num{flex: 0 0 80px;}
      .pay{flex: 0 0 80px;}
      .customer{flex: 0 0 100px;}
      .OTA{flex: 0 0 80px;}
      .reason{flex: 0 0 110px; }
      .downTime{flex: 0 0 120px;}
      .downTime2{flex: 0 0 80px;}
      .type{flex: 0 0 90px; }
      .type2{flex: 0 0 70px; }
      .operation{flex: 0 0 60px;}
  }
  li{display: flex; height: auto; line-height: 30px; text-align: left; padding: 15px 5px 0 5px;

    span{display: inline-block; box-sizing: border-box; line-height: 14px;}
    .order{flex: 0 0 220px;}
    .name{flex: 1;
      p{font-size: 12px; width: 92%; text-align: justify;}
    }
    .price{flex: 0 0 60px;}
    .num{flex: 0 0 80px;}
    .pay{flex: 0 0 80px;}
    .customer{flex: 0 0 100px;
      p{margin: 0 0 5px 0; width: 95%; font-size: 12px;}
    }
    .OTA{flex: 0 0 80px;}
    .reason{flex: 0 0 110px;
      p{font-size: 12px; width: 95%;} }
    .downTime{flex: 0 0 120px;
      p{margin: 0 0 5px 0; width: 95%; font-size: 12px;}
    }
    .downTime2{flex: 0 0 80px;
      p{margin: 0 0 5px 0; width: 95%; font-size: 12px;}
    }
    .type{flex: 0 0 90px; }
    .type2{flex: 0 0 70px; }
    .operation{flex: 0 0 60px;}
  }
  li:nth-of-type(even){background: #FAFAFC;}
}
</style>
